{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        .btn-padding{margin: 5px 0 0 8px !important}
    </style>
{% endblock %}
{% block content %}
      <div class="col-xs-12 col-sm-12 widget-container-col ui-sortable">
          <!-- #section:custom/widget-box -->
          <div class="widget-box">
              <div class="widget-header">
                  <h5 class="widget-title">{{ 'Role List'|trans }}</h5>

                  <!-- #section:custom/widget-box.toolbar -->
                  <div class="widget-toolbar">
                      <a href="#" data-action="collapse">
                          <i class="ace-icon fa fa-chevron-up"></i>
                      </a>
                  </div>

                  <!-- /section:custom/widget-box.toolbar -->
              </div>

              <div class="widget-body">
                  <div class="widget-main">
                      <div class="btn-group" data-toggle="buttons" id="role-button">
                          {% for role in roles %}
                              <label class="btn btn-success btn-padding" onclick="clicked({{ role.roleId }})" >
                                  <input type="radio" name="options" id="option2" autocomplete="off"  >
                                  <span id="text_{{ role.roleId }}1">{{ role.name }}</span>&nbsp;&nbsp;&nbsp;
                                  <span id="text_{{ role.roleId }}2">{{ roleGrade[role.roleGrade] }} </span>
                              </label>
                          {% endfor %}
                      </div>
                      <br/><br/>
                      <p>
                         <button class="btn btn-primary btn-round btn-sm" id="add">{{ 'Add'|trans }}</button>
                         <button class="btn btn-primary btn-round btn-sm" id="edit">{{ 'Update'|trans }}</button>
                         <button class="btn btn-primary btn-round btn-sm" id="delete">{{ 'Delete'|trans }}</button>
                      </p>

                      <p id="insertdiv" class="input-group" style="display:none">
                          <input type="text" class="input-sm" id="insertval" placeholder="{{ 'Role Name'|trans }}">
                          <select class="input-small" id="insertgrade">
                              {% for key,rg in roleGrade %}
                              <option value="{{ key }}">{{ rg }}</option>
                              {% endfor %}
                          </select>
                          <button id="insert" class="btn btn-sm btn-success">{{ 'Save'|trans }}</button>
                      </p>
                      <p id="editdiv" class="input-group" style="display:none">
                          <input type="text" class="input-sm" id="editval" placeholder="{{ 'Role Name'|trans }}">
                          <select class="input-small" id="editgrade" >
                              {% for key,rg in roleGrade %}
                                  <option value="{{ key }}" label="{{ rg }}">{{ rg }}</option>
                              {% endfor %}
                          </select>
                          <button id="update" class="btn btn-sm btn-success">{{ 'Change'|trans }}</button>
                      </p>
                      <br/>
                      <div id="info" align="center"></div>
                  </div>
              </div>
          </div>
          <!-- /section:custom/widget-box -->
      </div>
      <div class="col-xs-12 col-sm-12 widget-container-col ui-sortable">
          <!-- #section:custom/widget-box -->
          <div class="widget-box">
              <div class="widget-header">
                  <h5 class="widget-title">{{ 'Background privilege'|trans }}</h5>

                  <!-- #section:custom/widget-box.toolbar -->
                  <div class="widget-toolbar">
                      <a href="#" data-action="collapse">
                          <i class="ace-icon fa fa-chevron-up"></i>
                      </a>
                  </div>

                  <!-- /section:custom/widget-box.toolbar -->
              </div>

              <div class="widget-body">
                  <div class="widget-main" id="action_lsit">
                      {% for menu in menuList %}
                          <p class="alert alert-info">
                              <label>
                                  <input type="checkbox" class="ace" id="parent_{{ menu.id }}" onclick="selected('{{ menu.id }}')" value="">
                                  <span class="lbl" style="color: #4cae4c">{{ menu.menuText }}</span>
                              </label>
                              <span id="child_{{ menu.id }}" style="margin-left:20px; ">
                                  {% for child in menu.childData %}
                                      {% if child.id != 2 %}
                                          <label >
                                              <input name="competence[]" type="checkbox" class="ace"  id="{{ child.menuUrl }}"  value="{{ child.menuUrl }}">
                                             <span class="lbl">
                                                {{ child.menuText }}
                                             </span>
                                          </label> &nbsp;&nbsp;
                                      {% endif %}
                                      {% if (menu.id == 1 or menu.id == 89 or menu.id == 37) and loop.last %}
                                        {% for add in addRole[menu.id] %}
                                          <label >
                                              <input name="competence[]" type="checkbox" class="ace"  id="{{ add.menuUrl }}"  value="{{ add.menuUrl }}">
                                                 <span class="lbl">
                                                    {{ add.menuText }}
                                                 </span>
                                          </label> &nbsp;&nbsp;
                                        {% endfor %}
                                      {% endif %}
                                  {% endfor %}
                              </span>
                          </p>
                      {% endfor %}
                      <p>
                          <button class="btn btn-primary btn-round btn-sm" id="all">{{ 'Select all'|trans }}</button>
                          <button class="btn btn-primary btn-round btn-sm" id="unall">{{ 'Select not all'|trans }}</button>
                          <button class="btn btn-primary btn-round btn-sm" id="submit_role" onclick="insert()">{{ 'Submit'|trans }}</button>

                      </p>
                  </div>
              </div>
          </div>
          <!-- /section:custom/widget-box -->
      </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@gritter_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        var click_id = '';
        $("#add").click(function(){
            $("#info").html("");
            $("#insertdiv").css('display','inline');
            $("#editdiv").css('display','none');
            $("#insertval").val('');
        });
        $("#edit").click(function(){
            $("#editdiv").css('display','inline');
            $("#insertdiv").css('display','none');
            if($("#editval").val()==""){
                $("#editdiv").hide();
                $("#info").html("<font color='red'>{{ 'Please choose to modify the role'|trans }}</font>");
            }
            else{
                $("#editdiv").show();
            }
        });
        $("#all").click(function(){
            checkedObj($("#action_lsit input"));
        });
        $("#unall").click(function(){
            $("#action_lsit input").removeAttr('checked');
        });
        $("#insert").click(function(){
            var name = $.trim($("#insertval").val());
            var grade = $("#insertgrade").val();
            if(name)
            {
                $('#submit_role').attr('disabled',true);
                $.ajax({
                    url:      "{{ path('icsoc_security_role_add') }}",
                    data:     {name: name,role_grade:grade},
                    type:     "get",
                    dataType: "json",
                    success: function (responce) {
                        console.log(responce);
                        if (responce.code == 200) {
                            $("#insertdiv").css('display','none');
                            var str = '<label class="btn btn-success btn-padding" onclick="clicked('+responce.data.role_id+')"> ';
                            str+='<input type="radio" name="options" autocomplete="off"> ';
                            str+='<span id="text_'+responce.data.role_id+'1">'+responce.data.name+'</span>&nbsp;&nbsp;&nbsp;';
                            str+='<span id="text_'+responce.data.role_id+'2">'+responce.data.role_grade+'</span></label>';
                            $(str).appendTo('#role-button');
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Add success'|trans }}',
                                class_name: 'gritter-success'
                            });
                        } else {
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Failed to add'|trans }},'+responce.message,
                                class_name: 'gritter-error'
                            });
                        }
                        $('#submit_role').attr('disabled',false);
                    }
                });
                $("#insertdiv").css('display','none');
            }
            else
            {
                $.gritter.add({
                    title: '{{ 'Prompt'|trans }}',
                    text: '{{ 'Please fill in the role name'|trans }}',
                    class_name: 'gritter-error'
                });
            }

        });

        $("#update").click(function(){
            var name = $.trim($("#editval").val());
            var grade = $("#editgrade").val();
            if(name!=''){
                $.ajax({
                    url:      "{{ path('icsoc_security_role_edit') }}",
                    data:     {id: click_id, name: name,role_grade:grade},
                    type:     "get",
                    dataType: "json",
                    success: function(responce){
                        if(responce.code == 200)
                        {
                            $("#editdiv").css('display','none');
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Successful modification'|trans }}',
                                class_name: 'gritter-success'
                            });
                            $("#text_"+click_id+"1").text(responce.data.name);
                            $("#text_"+click_id+"2").text(responce.data.role_grade);
                        } else {
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Fail modification'|trans }},'+responce.message,
                                class_name: 'gritter-error'
                            });
                        }
                    }
                });
                $("#editdiv").css('display','none');
            }
            else
            {
               // $.messager.alert("修改确认","角色名称不能为空");
            }
        });

        //删除角色
        $("#delete").click(function() {
            if (click_id=="") {
                $("#insertdiv").hide();
                $("#info").html("<font color='red'>{{ 'Please select to delete characters'|trans }}</font>");
            } else {

                $('#delete').popover({
                    placement:'top',
                    html:true,
                    content:'<div>{{ "Are you sure you want to delete this role"|trans }}</div><div><button type="button" onclick="confirmDel(1)">确认</button>&nbsp;&nbsp;<button type="button" onclick="confirmDel(0)">取消</button></div>'
                });
                $("#info").html("");
            }
        });

        function confirmDel (flag) {
            if(!flag){
                $('#delete').popover('hide');
                return
            }
            if (click_id=='') {
                gritterAlert('','{{ 'Please select to delete characters'|trans }}','error');
                return ;
            }
            $("#editval").val('');
            $("#editdiv").hide();
            $("#insertdiv").hide();
            $.ajax({
                url:      "{{ path('icsoc_security_role_info_delete_role') }}",
                data:     {id: click_id},
                type:     "get",
                dataType: "json",
                success: function(responce) {
                    if (responce["code"] == 200) {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: '{{ 'Delete success'|trans }}',
                            class_name: 'gritter-success'
                        });
                        $("#text_"+click_id+'1').parent().remove();
                        $("#action_lsit input").removeAttr('checked');
                        click_id = ""; //删除成功后吧click_id 清空；
                    } else {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: responce.message,
                            class_name: 'gritter-error'
                        });
                    }
                    $('#delete').popover('hide');
                }
            });
            $("#deletediv").css('display','none');

        }

        function clicked(id) {
            click_id = id;
            if($("#insertdiv").css('display')=='inline')
            {
                $("#insertdiv").hide();
                $("#editdiv").show();
            }
            $("#editval").val($("#text_"+id+1).text());
            $("#editgrade option[label='"+$("#text_"+id+2).text().trim()+"']").attr("selected", "selected");
            $("#action_lsit input").removeAttr('checked');
            $("#info").html("");
            $.ajax({
                url:      "{{ path('icsoc_security_role_action_list') }}",
                data:     {id: id},
                type:     "get",
                dataType: "json",
                cache:false,
                success: function(responce){
                    if(responce["code"] == 200)
                    {

                        var id_arr = responce['data'][0]['action_list'].split(',');
                        if(id_arr=="all"){
                            $("#maindiv input:not(.button)").attr('checked','checked');
                        } else {
                            var len = id_arr.length-1;
                            for (var i=0;i<=len;i++) {
                                if(id_arr[i] && $("#"+id_arr[i])[0]) {
                                    $("#"+id_arr[i])[0]['checked'] = true;
                                }
                            }
                        }
                    } else {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: responce.message,
                            class_name: 'gritter-error'
                        });
                    }
                }
            });
            $('#role-button > label').attr('class', 'btn btn-success btn-padding');
            $('#text_'+id+'1').parent().attr('class', 'btn btn-danger btn-padding');
        }

        /**
         * 选择父类；子类全选；
         * @param id
         */
        function selected(id) {
            if ($("#parent_"+id)[0]['checked']) {
                var obj =   $("#child_"+id+" input");
                checkedObj(obj);
            } else {
                $("#child_"+id+" input").removeAttr('checked');
            }
        }


        function insert()
        {
            var arr_id = '';
            $("#action_lsit input:checked").each(function(){
                var val = $(this).val();
                if(val)
                    arr_id += val+",";
            });
           //console.log(arr_id);
            if (click_id=="") {
                $.gritter.add({
                    title: '{{ 'Prompt'|trans }}',
                    text: '{{ 'You did not select any role cannot perform this operation'|trans }}!',
                    class_name: 'gritter-error'
                });
            } else {
                $.ajax({
                    type:     "post",
                    url:      "{{ path('icsoc_security_role_info_set_action_list') }}",
                    data:     {arr_id: arr_id,id:click_id},
                    dataType: "json",
                    cache:false,
                    success: function(responce) {
                        if (responce["code"] == 200) {
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Set the permissions for success'|trans }}!',
                                class_name: 'gritter-success'
                            });
                        } else {
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Failed to set rights'|trans }}!'.responce['message'],
                                class_name: 'gritter-error'
                            });
                        }
                    }
                });
            }
        }

        /**
         * 给checkbox 设置checked
         * @param obj
         */
        function checkedObj(obj)
        {
            for (var i = 0; i<obj.length; i++) {
                obj[i].checked = true;
            }
        }
        $(document).ready(function(){
            $('#delete').popover({
                placement:'top',
                html:true,
                content:'<div>{{ "Are you sure you want to delete this role"|trans }}</div><div><button type="button" onclick="confirmDel(1)">{{ "Confirmation"|trans }}</button>&nbsp;&nbsp;<button type="button" onclick="confirmDel(0)">{{ "Cancel"|trans }}</button></div>'
            });
        })
    </script>
{% endblock %}